<template>
	<view class="page" :style="'height:' + height + 'rpx'">
		<view class="top">
			<view class="top_current" v-if="currentChoose.length != 0 || miTaRight == 1">
				<scroll-view class="scroll-view" scroll-x enable-flex scroll-with-animation
					:scroll-into-view="childrenId">
					<view class="item" v-for="(item,index) in currentChoose" :key="index" :id="'id-' + index">
						<view class="person_sex iconfont icon-renyuan1"
							:style="{'color': (item.esobject.source.sex == '男' ? '#3d8cff':'#EE82EE')}"></view>
						<view class="person_name">{{item.esobject.source.name}}</view>
					</view>
					<!-- 					<view class="item" style=" color: 	#A1A1A1">
						<view class=" person_sex iconfont icon-tianjia1"></view>
						<view class="person_name">人员添加</view>
					</view> -->
				</scroll-view>
				<view class="sure">
					<button @click="addMember()">确定</button>
				</view>

			</view>
			<miTaSearch class="mi_ta_search" @searchResult="searchResult()" @searchInput="searchInput()" @cut="cut"
				@getSearchResult="getSearchResult()">
			</miTaSearch>
		</view>
		<view class="result">
			<view class="noDataTip" v-if="noData" >
				<view class="iconfont icon-wuanpai" style="color:#6B6B6B;margin-right: 25rpx;font-size: 45rpx;"></view>
				<view style="font-size: 45rpx;">暂无查询结果!</view>
			</view>
			<!-- 结果列表  ——start-->
			<checkbox-group class="goodsContent" @change="checkboxChange" :style="resultStyle" v-if="!noData">

				<label class="goodsCard" v-for="(item,index) in result" :key="index">
					<view class="checkbox">
						<checkbox :value="JSON.stringify(item)" :checked="item.esobject.source.checked"
							color="#23b8ff" />
					</view>
					<miTaPersonItem :person="item.esobject" :lineHeight="lineHeight" class="goodsData">
						<template v-slot:personName>
							<view class="person_name" v-html="item.esobject.highLight.name"></view>
						</template>
					</miTaPersonItem>
				</label>
			</checkbox-group>
			<!-- 结果列表 ——end -->
		</view>
	</view>
</template>

<script>
	import miTaPersonItem from "../../components/miTaPersonItem/miTaPersonItem.vue"
	import miTaSearch from "../../components/miTaSearch/miTaSearch.vue"
	import addMemberMixin from "../../static/js/addMemberMixin.js"
	export default {
		onLoad(options) {
			let that = this;
			this.header = getApp().globalData.header;
			this.navBarHeight = getApp().globalData.navBarHeight
			// console.log('配置',options);
			this.situation = options.situation;
			this.miTaRight = options.miTaRight;
			console.log(this.miTaRight )
			if (this.situation == "'addSomeOneCan'") {
				this.detailPrivacygetting(3)
			} else if (this.situation == "'addSomeOneCanNot'") {
				this.detailPrivacygetting(4)
			}

		},
		computed: {
			tipStyle() {
				if (this.isAnother) {
					if (this.currentChoose.length != 0|| this.miTaRight == 1) {
						return 'margin-top:' + (330 + this.navBarHeight) + 'rpx'
					} else {
						return 'margin-top:' + 330 + 'rpx'
					}
				} else {
					if (this.currentChoose.length != 0 || this.miTaRight == 1) {
						return 'margin-top:' + (330 + this.navBarHeight) + 'rpx'
					} else {
						return 'margin-top:' + 330 + 'rpx'
					}
				}
			},
			resultStyle() {
				if (this.isAnother) {
					if (this.currentChoose.length != 0 || this.miTaRight == 1) {
						return 'margin-top:' + (300 + this.navBarHeight) + 'rpx'
					} else {
						return 'margin-top:' + 300 + 'rpx'
					}
				} else {
					if (this.currentChoose.length != 0 || this.miTaRight == 1) {
						return 'margin-top:' + (320 + this.navBarHeight) + 'rpx'
					} else {
						return 'margin-top:' + 320 + 'rpx'
					}
				}
			}
		},
		onReachBottom(e) {
			// console.log('页面滚动',e);
			if (this.isName) {
				// console.log('姓名查询')
				this.nameParams.currentPage++;
				this.getSearchInput()
			} else {
				// console.log('条件查询');
				this.params.currentPage++;
				this.searchResult();
			}
		},
		data() {
			return {
				header: null,
				height: 0,
				privacySettingParams: { //把某些人设为只给他看或不给他看的参数
					list: [],
					setting: ''
				},
				situation: '', //当前页面时用于 “给谁看”还是 “不给谁看”
				originChoose: [], //用于存放原先选中
				navBarHeight: 0,
				miTaRight: 0
			}
		},
		mixins: [addMemberMixin],

		methods: {
			//选中
			// checkboxChange(e) {
			// 	let that = this;
			// 	this.checkedChoose = [];
			// 	this.checkedChoose = e.detail.value;
			// 	let temp = []; //存放当前选择的所有成员的学号数组
			// 	// console.log(that.currentChoose)
			// 	that.currentChoose.forEach((item,index) => {
			// 		temp.push(item.esobject.source.no)
			// 	})
			// 	if (this.currentChoose.length == 0) {
			// 		this.num = 1
			// 	}
			// 	if (this.currentChoose.length == 0) {
			// 		this.currentChoose = [];
			// 		// console.log('执行')
			// 		this.checkedChoose.forEach((item,index) => {
			// 			this.currentChoose.push(JSON.parse(item));
			// 			// console.log(JSON.parse(item))
			// 		})
			// 	} else {

			// 		//若本轮查询中，已选中的在选择过程中，已经取消选择时，对已选中的数据进行取消
			// 		//列表中原先有的，当本次选择中取消时，原先的也要删除
			// 		if (this.choose.length == 0) {
			// 		} else {
			// 			let anotherTemp = [] //用于存放当前选中的学号数组
			// 			 e.detail.value.forEach((item,index) => {
			// 				 anotherTemp.push(JSON.parse(item).esobject.source.no)
			// 			 })
			// 			this.choose.forEach((item, index) => {
			// 				if (anotherTemp.indexOf(JSON.parse(item).no) == -1) {
			// 					let index1 = temp.indexOf(JSON.parse(item).no);
			// 					if (index1 != -1) {
			// 						that.currentChoose.splice(index1, 1);
			// 						that.choose.splice(index,1) //删除后，原先选中的也要删除，这样后续就和本轮选择一致
			// 					}
			// 				}
			// 			})
			// 		}


			// 		//新增加的选择里，若下面选择删除的话，上面也要删除
			// 		if (this.startIndex != 0) {
			// 			// console.log(this.startIndex,'开始增加的坐标');
			// 			// console.log(this.checkedChoose)
			// 			for (let i = this.startIndex; i < this.currentChoose.length; i ++) {
			// 				let isTrue = true;
			// 				this.checkedChoose.forEach((item,index) => {
			// 					if (this.currentChoose[i].esobject.source.no == JSON.parse(item).esobject.source.no) {
			// 						isTrue = false;
			// 					}
			// 				})
			// 				if (isTrue) {  //表示currentchoose里有元素，当前选择中没有，要删除它
			// 					this.currentChoose.splice(i,1);
			// 				}
			// 			}
			// 		}

			// 		//本轮选择中，已选的没有才push进去
			// 		this.checkedChoose.forEach((item,index) => {
			// 			if (temp.indexOf(JSON.parse(item).esobject.source.no) == -1) {

			// 				that.currentChoose.push(JSON.parse(item));
			// 			}
			// 		})
			// 	}
			// 	this.setScroll();
			// },

			// scroll-view 动态添加标签时，自动滚动到最左边,利用scroll-into-view属性
			// setScroll() {
			// 	let len = this.currentChoose.length;
			// 	this.childrenId = 'id-' + (len - 1);
			// },

			//查看只给谁看或不给谁看具体的人
			async detailPrivacygetting(index) {
				// console.log(index);
				uni.showLoading({
					title: '加载中..',
					mask: true
				});
				let params = {
					setting: ''
				}
				params.setting = index
				let res = await getApp().UniRequest("/mita/authority/detailPrivacySetting", "Get", params,
					this.header);
				console.log(res)
				if (res.code === 20000) {
					res.data.list.forEach((item, index) => { //存放原先的学号，以便后面删除
						this.originChoose.push(item.source.no);
						let temp = {
							esobject: null
						}
						temp.esobject = item;
						this.currentChoose.push(temp);
						this.num = 2;
					})
				}
				uni.hideLoading()
			},

			async addMember() {
				uni.showLoading({
					title: '请稍等..',
					mask: true
				});
				let that = this;
				//将当前选中和原先的对比，看原先哪些是需要删除的，即删除原先有的，但是当前没有
				let deleteArray = [];
				let newArray = [];
				for (let i = 0; i < this.originChoose.length; i++) {
					let isTrue = true;
					this.currentChoose.forEach((item, index) => {
						if (this.originChoose[i] == item.esobject.source.no) {
							isTrue = false;
						}
					})
					if (isTrue) {
						deleteArray.push(this.originChoose[i]);
					}
				}
				// console.log('要删除的数组',deleteArray);
				deleteArray.forEach((item, index) => {
					this.deleteMember(item)
				})
				// console.log('原先数据',this.originChoose)

				for (let i = 0; i < this.currentChoose.length; i++) {
					let isTrue = true;
					this.originChoose.forEach((item, index) => {
						if (this.currentChoose[i].esobject.source.no == item) {
							isTrue = false;
						}
					})
					if (isTrue) {
						newArray.push(this.currentChoose[i].esobject.source.no);
					}
				}

				// console.log('要新增的数组',newArray)

				let temp = (this.situation == "'addSomeOneCan'");
				newArray.forEach((item, index) => {
					this.privacySettingParams.list.push(item)
				})

				// console.log(this.privacySettingParams.list);

				if (this.situation == "'addSomeOneCan'") {
					this.privacySettingParams.setting = 3;
				} else if (this.situation == "'addSomeOneCanNot'") {
					this.privacySettingParams.setting = 4;
				}
				// console.log('参数',this.privacySettingParams)

				let res = await getApp().UniRequest("/mita/authority/detailPrivacySetting", "POST", this
					.privacySettingParams,
					this.header);
				// console.log('设置结果',res);
				if (res.code === 20000) {
					// console.log('添加成功');
					uni.hideLoading();
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '请稍后重试',
						icon: 'error',
						duration: 2000
					});
				}
			},
			async deleteMember(no) {
				let deleteParams = {
					targetNo: "",
					setting: ""
				}
				deleteParams.targetNo = no;
				if (this.situation == "'addSomeOneCan'") {
					deleteParams.setting = 3;
				} else if (this.situation == "'addSomeOneCanNot'") {
					deleteParams.setting = 4;
				}
				// console.log('删除的参数',deleteParams)
				let res = await getApp().UniRequest("/mita/authority/detailPrivacySetting?targetNo=" + deleteParams
					.targetNo + '&setting=' + deleteParams.setting, "DELETE", "",
					this.header);
				// console.log('删除结果',res);
				if (res.code === 20000) {
					// console.log('删除成功');
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '请稍后重试',
						icon: 'error',
						duration: 2000
					});
				}
			}
		},
		components: {
			miTaSearch,
			miTaPersonItem
		}
	}
</script>

<style lang="less" scoped>
	.page {
		position: relative;
		background-color: #f2f2f2;
		width: 100%;

		button {
			background-color: #fff;
			border: 0rpx;
			padding-right: 10rpx;
			padding-left: 10rpx;
		}

		.top {
			width: 100%;
			position: fixed;
			top: 0rpx;
			z-index: 200;

			.top_current {
				display: flex;
				justify-content: center;
				width: 100%;
				height: 120rpx;
				z-index: 300;
				background-color: #FFf;

				.scroll-view {
					white-space: nowrap !important;
					width: 80%;
					// height: 120rpx;
					display: flex;

					// padding: 20rpx;
					.item {
						display: inline-block; //要设置为行内块
						width: 120rpx;
						height: 120rpx;
						// background-color: pink;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						// border: 2rpx solid #000000;
						margin-left: 20rpx;

						.person_sex {
							font-size: 50rpx;
						}

						.person_name {
							font-size: 24rpx;
							letter-spacing: 1rpx;
						}
					}


				}

				.sure {
					width: 20%;
					height: 120rpx;
					position: relative;
					text-align: center;

					button {
						position: absolute;
						bottom: 20rpx;
						right: 20rpx;
						width: 60%;
						font-size: 26rpx;
						background-color: #23b8ff;
						color: #FFFFFF;
					}
				}

			}

			.mi_ta_search {
				width: 100%;
			}

		}

		.result {
			position: relative;
			height: 100%;
			background-color: #f2f2f2;
			padding-top: 40rpx;
			padding-left: 20rpx;

			.noDataTip {
				height: 150rpx;
				width: 650rpx;
				line-height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 50%;
				margin-top: -150rpx;
				left: 50%;
				margin-left: -325rpx;
				font-size: 50rpx;
				color: #6B6B6B;
				// background-color: #fff;
				// box-shadow: 0.5rpx 0.5rpx 40rpx #DBDBDB;
				border-radius: 20rpx;
			}

			.goodsContent {
				background-color: #f2f2f2;

				.goodsCard {
					display: flex;
					position: relative;
					padding: 0rpx;

					.checkbox {
						width: 5%;
						text-align: center;
						line-height: 200rpx;
					}

					.goodsData {
						width: 95%;
						height: 100%;
						display: flex;
					}

				}
			}
		}
	}
</style>
